<script setup>
import {onLoad, onPageScroll, onReachBottom, onShow} from "@dcloudio/uni-app";
import useZPaging from "z-paging/components/z-paging/js/hooks/useZPaging.js";
import {getNewShopListAPI} from "../../services";
import {conUtils} from "../../utils/conUtils";
import {ref} from "vue";
import ShopItemGF from "../../pages/index/shopItemGF.vue";
import ShopItem from "../../pages/index/shopItem.vue";
import XtxEmpty from "../../components/XtxEmpty.vue";
import CacheImage from "../../components/CacheImage.vue";
import Search_sort from "./search_sort.vue";
import {BaseImgUrl} from "../../utils/lshttp";
import {getHotRecommendListAPI, getKeywordFindListAPI} from "../../services/search";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {getUserPlaceAPI} from "../../services/common";
import {codeBindAPI} from "../../services/makeMoney";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
const userInfoStore = useUserInfoStore()
const commonInfoStore = useCommonInfoStore() // 使用commonInfoStore状态管理器
const userInfo = userInfoStore.userInfo
const newUser = ref() // 是否是新用户
// 数据列表
const dataList = ref([])
// 店铺数据
const shopType = ref(0)
// 分类数据
const categoryId = ref(0)
// 分类名称
const categoryName = ref('')
// 搜索关键字
const keyword = ref('')
// 输入内容
const myInput = ref()
// 是否有数据
const isNodata = ref(false)
// 排序类型
const sortType = ref(0)
// 排序类型1
const type1 = ref(1)
// 排序类型2
const type2 = ref(0)
// 排序类型3
const type3 = ref(0)
// 排序类型4
const type4 = ref(0)
// 页面滚动改变背景色
const scrollBackground = ref("transparent")
// 页面滚动距离
const scrollTop = ref(0)

// 搜索内容后隐藏搜索关键字、热门推荐内容
const isHideSearch = ref(false)
// 是否显示加载gif图标
const isRefresher = ref(false)
// 随机获取两条官返店铺
const randomGfList = ref([])
// 返回
const back = () => {
  uni.navigateBack()
}
// 最近搜索关键字数据
const keywordRecentlyList = ref( [
  /* {
    id: 1,
    name: '卤味小吃'
  },
  {
    id: 2,
    name: '炸串小吃'
  },
  {
    id: 3,
    name: '水果'
  },
  {
    id: 4,
    name: '奶茶咖啡果汁'
  },
  {
    id: 5,
    name: '酸菜猪脚'
  },
  {
    id: 6,
    name: '汉堡'
  },
  {
    id: 7,
    name: '炸鸡'
  },
  {
    id: 8,
    name: '吐司面包'
  },
  {
    id: 9,
    name: '烧烤'
  }, */
])
// 最近搜索展示的条数
const keywordRecentlyNum = ref(9)
// 搜索发现关键字数据
const keywordFindList = ref( [
  /* {
    id: 1,
    name: '卤味小吃'
  },
  {
    id: 2,
    name: '炸串小吃'
  },
  {
    id: 3,
    name: '水果'
  },
  {
    id: 4,
    name: '奶茶咖啡果汁'
  },
  {
    id: 5,
    name: '酸菜猪脚'
  },
  {
    id: 6,
    name: '汉堡'
  },
  {
    id: 7,
    name: '炸鸡'
  },
  {
    id: 8,
    name: '吐司面包'
  },
  {
    id: 9,
    name: '烧烤'
  },
  {
    id: 10,
    name: '香果火锅'
  },
  {
    id: 11,
    name: '鸭脖丫头'
  },
  {
    id: 12,
    name: '烧烤'
  },
  {
    id: 13,
    name: '鲜花店'
  }, */
])
// 热门推荐套餐列表数据
const keywordHotList = ref( [])

// 修改排序类型
// 是否官返
const shop_type = ref(0)
// 是否需要评价
const is_comment = ref(0)
const changeSortType = (type) => {
  if (type === 0 || type === 3 || type === 4) {
    type1.value = type
    sortType.value = type
    shop_type.value = 0
    is_comment.value = 0
    paging?.value.reload();
  }else if(type === 2){
    sortType.value = type
    shop_type.value = type
    type1.value = 0
    is_comment.value = 0
    paging?.value.reload();
  }else if (type === 6){
    sortType.value = type
    is_comment.value = 2
    shop_type.value = 0
    type1.value = 0
    paging?.value.reload();
  }

}
// 修改排序下标
const sortChangeIndex = () => {
  shopType.value = type3.value
  paging?.value.reload();
}
// 定位数据
const address = ref({
  latitude: '',
  longitude: '',
  addressStr: '',
  recommend: '',
  district: '',
  city: '',
})

onLoad(async (options) => {
  await uni.setNavigationBarTitle({
    title: options.cate_name || "搜索店铺"
  })

  conUtils("options", JSON.stringify(options))
  if (options.latitude && options.addressStr) {
    address.value.latitude = options.latitude
    address.value.longitude = options.longitude
    address.value.addressStr = options.addressStr
    address.value.recommend = options.addressStr
    address.value.district = options.district
    address.value.city = options.city
    categoryId.value = options.categoryId
    categoryName.value = options.categoryName

  }
  /* setTimeout(() => {
    myInput.value.focus()
  }, 500) */


  // 获取搜索发现关键字事件
  getKeywordFindList()
  // 获取随机官返店铺
  getRandomGfList()
  // 获取热门推荐套餐列表事件
  // getHotList()

})
onShow(() => {
  // 页面刷新自动获取本地缓存搜索关键字
  loadOldKeyword()
  // 页面加载判断用户是否登录和是否新用户
  if (userInfoStore.isNewUser || !userInfoStore.isLoginBool()) {
    newUser.value = '新用户'
  } else {
    newUser.value = '老用户'
  }
})

// 下拉刷新
const onPullDownRefresh = () => {
  console.log("onPullDownRefresh")
  isRefresher.value = true
}

// 选择地址
const chooseLoc = async () => {
  // #ifdef APP-PLUS || H5
  await uni.navigateTo({
    url: '/pages/search/search_location?lat='
        + address.value.latitude + '&log='
        + address.value.longitude + '&keyWord='
        + address.value.recommend + "&cityName="
        + address.value.city,
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      acceptDataFromOpenedPage: function (addressData) {
        console.log("addressData", addressData)
        setLocation(addressData.data)
      }
    }
  })
  // #endif
  // #ifdef MP
  const res = await uni.chooseLocation({latitude: address.value.latitude, longitude: address.value.longitude}) //{latitude: address.value.latitude, longitude: address.value.longitude}
  if (!res.name) {
    await uni.showToast({title: "请选择地址", icon: "none", duration: 3000})
    return
  }

  const addressRes = await getUserPlaceAPI(res.latitude, res.longitude)
  conUtils("getUserPlaceAPI", addressRes)
  console.log('解析的地址=', addressRes)

  // TODO 打包时候开启
  if (address.value.city && addressRes.result.city !== address.value.city) {
    await uni.showToast({title: "不能选择其他城市", icon: "none", duration: 3000})
    return
  }
  address.value.district = addressRes.result.district
  address.value.city = addressRes.result.city
  // commonInfoStore.setAddressDel(addressRes.result)
  // commonInfoStore.setAddress(address.value)
  setLocation(res)
  // #endif
}
const setLocation = (res) => {
  console.log('设置地址=', res)
  address.value.recommend = res.name
  address.value.latitude = res.latitude
  address.value.longitude = res.longitude
  if (res?.city) {
    address.value.city = res.city
  }
  // commonInfoStore.setAddress(address.value)
  //位置解析后刷新页面
  paging?.value.reload();

}


// 跳转搜索
const toSearch = async (res) => {
  console.log('res=', res)
  console.log('newUser', newUser.value)
  if (res){
    keyword.value = res
  }
  console.log('keyword', keyword.value)
  // 调用保存关键字方法
  saveKeyword(keyword.value)
  // 隐藏最近搜索、搜索发现、热门推荐内容；显示搜索结果
  if (keyword.value){
    isHideSearch.value = true
    paging.value.reload();
  } else if (!keyword.value){
    isHideSearch.value = false
  }
  // 获取字符串的第一个中括号后的八位字符
  let codeVal = ''
  if (res){
    // 获取中括号中的内容
    let regex = /\[(.*?)\]/g;
    codeVal = res?.match(regex)[0].slice(1, -1)
  }
  // 判断字符串是否是字母和数字
  if (/^[a-zA-Z0-9]+$/.test(codeVal)) {
    await codeBindAPI(codeVal).then(res => {
      uni.showToast({title: res.msg, icon: "success", duration: 3000})
    }).catch(err => {
      uni.showToast({title: err.msg, icon: "error", duration: 3000})
    })
  }
  console.log('isHideSearch', isHideSearch.value, keyword.value)
}
// 输入框聚焦事件
const searchFocusFun = async (e) => {
  console.log('keyword=', e, keyword.value)
  if (!keyword.value){
    // 显示最近搜索、搜索发现、热门推荐内容；隐藏搜索结果
    isHideSearch.value = false
  }
  // 获取字符串的第一个中括号后的八位字符
  let codeVal = ''
  if (e){
    // 获取中括号中的内容
    let regex = /\[(.*?)\]/g;
    codeVal = e?.match(regex)[0].slice(1, -1)
  }
  // 判断字符串是否是字母和数字
  if (/^[a-zA-Z0-9]+$/.test(codeVal)) {
    await codeBindAPI(codeVal).then(res => {
      uni.showToast({title: res.msg, icon: "success", duration: 3000})
    }).catch(err => {
      uni.showToast({title: err.msg, icon: "error", duration: 3000})
    })
  }
  console.log('codeVal', codeVal)
}
//加载历史搜索,自动读取本地Storage
const loadOldKeyword = () => {
  uni.getStorage({
    key: 'OldKeys',
    success: (res) => {
      var OldKeys = JSON.parse(res.data);
      keywordRecentlyList.value = OldKeys
    }
  });
}
//保存关键字到历史记录
const saveKeyword = (keyword) => {
  if (!keyword){
    return;
  }
  uni.getStorage({
    key: 'OldKeys',
    success: (res) => {
      var OldKeys = JSON.parse(res.data);
      var findIndex = OldKeys.indexOf(keyword);
      if (findIndex == -1) {
        OldKeys.unshift(keyword);
      }
      /* else {
        OldKeys.splice(findIndex, 1);
        OldKeys.unshift(keyword);
      } */
      //最多10个纪录
      // OldKeys.length > 10 && OldKeys.pop();
      uni.setStorage({
        key: 'OldKeys',
        data: JSON.stringify(OldKeys)
      });
      keywordRecentlyList.value = OldKeys
      console.log('success=', res, 'newArr=', keywordRecentlyList)
    },
    fail: (e) => {
      console.log("fail", e, 'keyword', keyword)
      var OldKeys = [keyword];
      uni.setStorage({
        key: 'OldKeys',
        data: JSON.stringify(OldKeys)
      });
      keywordRecentlyList.value = OldKeys
    }
  });
}
const paging = ref(null)
useZPaging(paging)
// 分类ID
const pagePvId = ref('')
// 是否是新店铺
const is_new_shop = ref(0)
// 获取列表数据
const queryList = (pageNo, pageSize) => {
  conUtils("queryList", pageNo)
  conUtils("pageSize", pageSize)
  if (!address.value.latitude) {
    paging?.value.complete(false);
    return
  }
  isNodata.value = false
  getNewShopListAPI({
    lat: address.value?.latitude,
    lng: address.value?.longitude,
    city: address.value?.city,
    type: shopType.value,
    is_orderable: sortType.value === 2 ? "0" : type4.value,
    order_by: type1.value,
    is_comment: is_comment.value, // 0默认全部、 1需要评论、 2无需评论
    is_new_shop: is_new_shop.value,
    pagePvId: pageNo === 1 ? "" : pagePvId.value,
    shop_type: shop_type.value,
    keyword: keyword.value,
    category: categoryId.value,
    is_ad: 0,
    limit: pageSize,
    page: pageNo
  }).then(res => {
    if(res.result.mt_message){
      pagePvId.value = res.result.mt_message.pagePvId
      const meituanPvId = res.result.mt_message.meituanPvId
      res.result.data.forEach((item) => {
        item["meituanPvId"] = meituanPvId
      })
    }

    if (sortType.value === 2 && type4.value === 1) {
      res.result.data.forEach((item) => {
        item.isShow = 1000
        for (let i = 0; i < item.planActivityInfoList.length; i++) {
          if (item.planActivityInfoList[i].inventory > 0) {
            item.isShow = 0
            break;
          }
        }
      })
    }
    isNodata.value = true
    console.log('店铺列表', res.result.data)
    paging?.value.complete(res.result.data);
    setTimeout(() => {
      // 隐藏刷新图标
      isRefresher.value = false
    }, 1000)

  }).catch(() => {
    paging?.value.complete(false);
    // 隐藏刷新图标
    isRefresher.value = false
  })
}

onPageScroll(e => {
  scrollTop.value = e.scrollTop
  if (scrollTop.value > 10){
    scrollBackground.value = "#ffffff"
  } else {
    scrollBackground.value = "transparent"
  }
  // console.log("scrollTop", scrollTop.value)
})

// 最近搜索删除
const recentlyDelFun = () => {
  uni.showModal({
    content: '确定清除历史搜索记录？',
    success: (res) => {
      if (res.confirm) {
        keywordRecentlyList.value = []
        uni.removeStorage({
          key: 'OldKeys'
        });
      } else if (res.cancel) {
      }
    }
  });
}
// 加载更多搜索历史记录
const showMoreFun = () => {
  if (keywordRecentlyNum.value >= keywordRecentlyList.value.length){
    uni.showToast({title: '没有更多了', icon: 'none', duration: 1000})
    setTimeout(() => {
      keywordRecentlyNum.value = 9
    }, 1000)
  } else {
    keywordRecentlyNum.value = keywordRecentlyNum.value + 10
  }
}
// 获取搜索发现列表数据
const getKeywordFindList = () => {
  getKeywordFindListAPI().then(res => {
    // console.log('搜索发现列表', res.result)
    keywordFindList.value = res.result
  })
}
onReachBottom(() => {
})
// 随机获取官返店铺套餐，2条
const getRandomGfList = () => {
  getNewShopListAPI({
    lat: address.value?.latitude,
    lng: address.value?.longitude,
    city: address.value?.city,
    shop_type: 2,
  }).then(res => {
    let gfArr = res.result.data
    for (var i = 0; i < 2; i++) {
      var random = Math.floor(Math.random() * (gfArr.length - 1));
      var arr = gfArr[random];
      gfArr.splice(random, 1);
      randomGfList.value.push(arr);
    }
    randomGfList.value.forEach(item => {
      item.gf_type='gf'
    })
    console.log('官返店铺套餐列表', randomGfList.value)
    getHotList(randomGfList.value[0], randomGfList.value[1])
  }).catch(err => {
    console.log('err', err)
    uni.showToast( {
      title: err.msg,
      icon: 'error',
      duration: 1000
    })
  })
}
// 获取热门推荐套餐列表数据
const getHotList = (random1, random2) => {
  // console.log('当前坐标=', addObj.value)
  getHotRecommendListAPI({
    lat: address.value?.latitude,
    lng: address.value?.longitude,
    city: address.value?.city,
    limit: 10,
    page: 1
  }).then(res => {
    console.log('热门推荐套餐列表', res.result)
    // keywordHotList.value = res.result
    addRandomItems(res.result, random1, random2)
  })
}

function addRandomItems(array, item1, item2) {
  console.log('随机加入的元素', array, item1, item2)
  // 计算可能的插入位置（不包括超出当前数组长度的位置）
  let positions = [...Array(array.length + 1).keys()]; // 生成一个包含所有可能索引的数组（不包括超出当前长度的位置）
  let randomIndex1 = Math.floor(Math.random() * positions.length); // 随机选择一个索引
  positions.splice(randomIndex1, 1); // 从可能的位置中移除已选的位置，避免重复使用
  let randomIndex2 = Math.floor(Math.random() * positions.length); // 再次随机选择一个索引

  // 使用splice方法插入元素
  array.splice(randomIndex1, 0, item1); // 在随机位置插入第一个元素
  array.splice(randomIndex2, 0, item2); // 在另一个随机位置插入第二个元素（注意：这里的第二个位置可能会是同一个位置）
  // console.log('随机加入的元素', array)
  keywordHotList.value = array
  console.log('最终的数据集', array)
}

// 搜索发现、换一批事件
const findRefreshFun = () => {
  getKeywordFindList()
}
// 跳转详情页面
const goDetailFun = (item) => {
  console.log('跳转详情页面', item)
  if (userInfoStore.isLogin()) {
    if (item.gf_type == 'gf'){
      uni.navigateTo({
        url: '/pages_shopdetail/shopdetail_gf?&activeIndex=0' + "&planType=0",
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          /* acceptDataFromOpenedPage: function (data) {
            console.log(data)
          }, */
          /* someEvent: function (data) {
            console.log(data)
            emits('changeShop', data)
          } */
        },
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('item', item)
        }
      })
    }else {
      uni.navigateTo({
        url: '/pages_shopdetail/shopdetail?id=' + item.shop_info.id + '&activityId=' + item.activity_id,
      })
    }
  }
}

</script>
<template>
  <!--hook-page-scroll-->
  <view class="search_content">
    <z-paging ref="paging" v-model="dataList"
              auto-show-back-to-top
              use-page-scroll
              @query="queryList"
              @onRefresh="onPullDownRefresh"
              back-to-top-bottom="200"
              back-to-top-threshold="50"
              :back-to-top-style="{right: '10rpx',width: '70rpx',height: '70rpx'}"
              :refresher-complete-delay="1000">
      <!--页面背景-->

      <template #top>
        <view class="top_box" :style="{background: scrollTop > 0 ? '#ffffff': ''}">

          <!--#ifdef H5-->
          <view class="bg_box" :style="{zIndex: scrollTop > 2 ? '10' : '0', height: '110rpx'}"></view>
          <!--#endif-->
          <!-- #ifdef MP -->
          <view class="bg_box" :style="{zIndex: scrollTop > 2 ? '10' : '0'}"></view>
          <u-navbar
              :title="categoryName || '搜索店铺'"
              placeholder
              titleStyle="color:black"
              leftIconColor="#000"
              auto-back
              :bgColor="scrollBackground"
          >
          </u-navbar>
          <!--#endif-->
          <!-- #ifdef APP-PLUS-->
          <u-status-bar></u-status-bar>
          <!--#endif-->
          <view class="nav_box" :class="scrollTop > 10 && !isHideSearch ? 'nav_active' : ''" >
            <view :class="scrollTop > 10 && isHideSearch ? 'active_bg' : 'search_box_content'" :style="{padding: isHideSearch ? '20rpx 0 0 20rpx' : '20rpx'}">
              <view class="sousuo_box">
                <!-- #ifdef APP-PLUS || H5-->
                <view style="display: flex;align-items: center;margin-right: 10rpx" @click="back">
                  <u-icon name="arrow-left" size="24" color="#666666"></u-icon>
                </view>
                <!--#endif-->
                <!--搜索输入框内容 @focus="searchFocusFun" @change="searchFocusFun"-->
                <view class="search_input_content" :style="{border: scrollTop > 10 ? '2rpx solid rgb(255, 105, 30)': ''}">
                  <view class="input_box">
                    <!--<u-input :customStyle="{padding: '10rpx 168rpx 10rpx 30rpx', backgroundColor:'#FFFFFF', border: scrollTop > 10 ? '1px solid #FF7F14': '', }" fontSize="26rpx"
                             type="text"
                             border="none"
                             prefixIcon="search"
                             prefixIconStyle="color:#AEAEAE;"
                             confirmType="search" @confirm="toSearch()"  :focus='false'
                             shape="circle" placeholder="找寻好店，享好餐" v-model="keyword" ref="myInput"/>-->
                    <u-search placeholder="找寻好店，享好餐" v-model="keyword" @change="searchFocusFun" shape="round" :clearabled="true" height="34" bgColor="transparent" :showAction="false"></u-search>
                  </view>
                  <view class="sousuo_btn" @click="toSearch()" :style="{right: isHideSearch ? '96rpx' : '6rpx'}">搜索</view>
                </view>

                <!--切换地址-->
                <view v-if="isHideSearch" class="change_address" @click="chooseLoc">
                  <view>切换</view>
                  <view>地址</view>
                </view>
              </view>
            </view>
          </view>
          <view v-if="isHideSearch" class="search_sort" :class="scrollTop > 10 && isHideSearch ? 'nav_active' : ''">
            <search_sort id="sort"
                         v-model:sortType="sortType"
                         v-model:type1="type1"
                         v-model:type2="type2"
                         v-model:newShop="is_new_shop"
                         v-model:type3="type3"
                         v-model:type4="type4"
                         @change="changeSortType"
                         @sortChange="sortChangeIndex"></search_sort>
          </view>
        </view>
      </template>
      <template v-if="!isHideSearch" #refresher>
        <view style="width: 110rpx;display: flex;align-items: center;padding: 20rpx 0 20rpx;margin: 0 auto;">
          <image src="https://lsz.lszbg.com/imgs/logo_loading.gif" mode="widthFix" style="width: 110rpx;"></image>
          <!--<cache-image src="https://lsz.lszbg.com/imgs/logo_loading.gif" :style="{height:'110rpx',width:'110rpx',margin:'auto'}">
          </cache-image>-->
        </view>
      </template>
      <view class="search_list_box" :style="{zIndex: scrollTop > 2 ? '0' : '11'}">
        <!--搜索关键字-->
        <view v-if="!isHideSearch" class="keywords_box">
          <!--最近搜索 keywordRecentlyList-->
          <view v-if="keywordRecentlyList.length > 0" class="recently_box">
            <view class="recently_title">
              <text>最近搜索</text>
              <view @click="recentlyDelFun" class="recently_del"><u-icon name="trash" size="18" color="#999999" ></u-icon></view>
            </view>
            <view class="keywords_list">
              <view v-for="(item, index) in keywordRecentlyList" :key="index" @click="toSearch(item)" style="display: inline-block">
                <view class="keywords_item" v-if="index <= keywordRecentlyNum">{{item}}</view>
              </view>
            </view>
            <!--显示更多 -->
            <view v-if="keywordRecentlyList.length > 10" class="keywords_show_more">
              <view class="more_line"></view>
              <view @click="showMoreFun" class="more_text">
                <text>显示更多</text>
                <!--<view v-if="keywordRecentlyNum.value >= keywordRecentlyList.length"><u-icon name="arrow-up" size="14" color="#999999"></u-icon></view>
                <view v-else><u-icon name="arrow-down" size="14" color="#999999"></u-icon></view>-->
              </view>
              <view class="more_line"></view>
              <!--<view>
                <u-divider
                    text=""
                    textSize="14"
                    textColor="#888888"
                    lineColor="#f4f4f4"
                    textPosition="center"
                    style="margin: 0"
                ></u-divider>
              </view>-->
            </view>
          </view>
          <!--搜索发现 keywordFindList-->
          <view class="find_box">
            <view class="find_title">
              <text>搜索发现</text>
              <view @click="findRefreshFun" class="find_refresh">
                <text style="padding-right: 10rpx;">换一批</text>
                <u-icon name="reload" size="18" color="#999999"></u-icon>
              </view>
            </view>
            <view class="find_list">
              <view class="find_item" v-for="(item, index) in keywordFindList" :key="index" @click="toSearch(item)">
                <view class="find_text">{{item}}</view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="isHideSearch && !isRefresher && dataList.length > 0" style="height: 96rpx;"></view>
        <!--店铺列表-->
        <view class="home_shop_box" :style="{background: !isHideSearch ? '#ffffff' : ''}">
          <!--显示下拉刷新图标 -->
          <view v-if="isRefresher && isHideSearch" style="width: 110rpx;display: flex;align-items: center;margin: 0 auto;">
            <image src="https://lsz.lszbg.com/imgs/logo_loading.gif" mode="widthFix" style="width: 110rpx;"></image>
            <!--<cache-image src="https://lsz.lszbg.com/imgs/logo_loading.gif" :style="{height:'110rpx',width:'110rpx',margin:'auto'}">
            </cache-image>-->
          </view>
          <view v-if="!isHideSearch" class="home_shop_bg"></view>
          <!--热门推荐店铺列表-->
          <view v-if="!isHideSearch" class="shop_box_content">
            <view class="shop_box_title">
              <image :src="BaseImgUrl + '/search/search_title_icon.png'" mode="widthFix" style="width: 44rpx;height: 44rpx;"></image>
              <text>热门推荐</text>
            </view>
            <view class="shop_box_list">
              <view class="shop_box_item" v-for="(item, index) in keywordHotList" :key="index" @click="goDetailFun(item)">
                <view class="shop_box_item_img">
                  <text v-if="index < 3" class="shop_box_item_img_level" style="background: linear-gradient( 180deg, #FF7F14 0%, #FF5429 96%);">{{index+1}}</text>
                  <text v-else class="shop_box_item_img_level" style="background: linear-gradient( 57deg, #C69C7D 0%, #DDB09D 100%);">{{index+1}}</text>
                  <image v-if="item.gf_type == 'gf'" :src="item.picture" mode="widthFix" style="width: 100%;"></image>
                  <image v-else :src="item.shop_info.logo" mode="widthFix" style="width: 100%;"></image>
                  <!--<image v-if="item.shop_type === 2" :src="item.picture" mode="widthFix" style="width: 100%;"></image>-->
                </view>
                <view class="shop_box_list_content">
                  <view class="shop_box_content_wrap">
                    <view v-if="item.gf_type == 'gf'" class="shop_box_content_title ellipsis-one-line">
                      {{item.name}}
                    </view>
                    <view v-else class="shop_box_content_title ellipsis-one-line">
                      {{item.shop_info.name}}
                      <text v-if="item.is_hot" class="hot">热</text>
                      <text v-if="item.is_rebate" class="hot">高返</text>
                    </view>
                    <!--<view v-if="item.planActivityInfoList?.length === 1 && item.shop_type === 2" class="shop_box_content_activity">商家活动</view>-->
                    <!--<view v-if="item.activity?.length > 1" class="shop_box_content_activity">
                      <view class="shop_box_content_activity_cash">返</view>
                      <view class="shop_box_content_activity_quality">满20返15</view>
                    </view>-->

                    <view v-if="item.gf_type == 'gf'" class="shop_box_content_activity">
                      <view class="shop_box_content_activity_cash">返</view>
                      <view class="shop_box_content_activity_quality">最高返￥{{ userInfo?.is_member === 0 ? item.planActivityInfoList[0].commission.maxCommission : item.planActivityInfoList[0].member_commission.maxCommission }}</view>
                    </view>
                    <view v-else class="shop_box_content_activity">商家活动</view>

                  </view>
                  <!--<view class="shop_box_content_right">还剩<text style="color:#FF5429;">{{item.order_num ? item.order_num : '0'}}</text>份</view>-->
                </view>
              </view>
            </view>
          </view>
          <!--搜索后显示的店铺列表-->
          <view v-if="isHideSearch" class="shops_list_box">
            <view v-for="(items,index) in dataList" v-if="dataList.length > 0" :key="index" class="shops_list">
              <view v-if="items.isShow === 1000"></view>
              <shop-item v-else-if="items.shop_type === 1" :items="items" :newUser="newUser"></shop-item>
              <shop-item-g-f v-else :items="items" :newUser="newUser"></shop-item-g-f>
            </view>
          </view>

        </view>
        <view style="display: flex;flex-direction: column;align-items: center;padding-top: 80rpx"
              v-if="dataList.length === 0 && !isNodata">
          <u-loading-icon color="#F97632"></u-loading-icon>
          <view style="font-size: 26rpx;font-weight: 600;color: #F97632;text-align: center;box-sizing: border-box;padding: 20rpx 0 60rpx 0;">
            正在为您加载附近店铺
          </view>
        </view>

      </view>
      <template #empty>
        <view>
          <XtxEmpty />
          <view class="null_text">暂无店铺，请搜索其他关键字</view>
        </view>
      </template>
      <!-- 自定义的没有更多数据view -->
      <template #loadingMoreNoMore>
        <view class="null_text">没有更多数据</view>
        <u-safe-bottom></u-safe-bottom>
      </template>
    </z-paging>
  </view>
</template>

<style>
page {
  background-color: #F6F6F6;
}
</style>
<style lang="scss" scoped>
page {
  //height: 100%;
  background-color: #F6F6F6;
}

::v-deep .zp-l-container {
  margin-bottom: 50px !important;
}

::v-deep .u-slot-content {
  display: block !important;
}

.search_content {
  //height: 100%;
  display: flex;
  flex-direction: column;
}
.top_box{
  width: 100%;
  position: relative;
}
/* 背景css */
.bg_box{
  width: 100%;
  height: 300rpx;
  background: linear-gradient( 179deg, #FFF8F3 0%, rgba(255,255,255,0) 100%);
  position: absolute;
  top: 0;
}
/* 搜索关键字css */
.keywords_box{
  padding: 30rpx 30rpx 0;
  margin-top: 10rpx;
  background: #FFFFFF;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  position: relative;
  z-index: 10;
  /* 最近搜索css */
  .recently_box{
    margin-bottom: 10rpx;
    .recently_title{
      font-size: 32rpx;
      color: #3D3D3D;
      line-height: 28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 30rpx;
      .recently_del{
        padding: 10rpx 20rpx;
      }
    }
    .keywords_list{
      .keywords_item{
        font-size: 24rpx;
        color: #333333;
        line-height: 24rpx;
        display: inline-block;
        padding: 16rpx 24rpx;
        background: #F4F4F4;
        border-radius: 30rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
      }
    }
    .keywords_show_more{
      width: 100%;
      height: 50rpx;
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .more_text{
        font-size: 24rpx;
        color: #888888;
        line-height: 40rpx;
        padding: 10rpx 20rpx;
        display: flex;
        align-items: center;
      }
      .more_line{
        height: 2rpx;
        width: 30%;
        background: #f4f4f4;
      }
    }
  }
  /* 搜索发现 */
  .find_box{
    padding-bottom: 30rpx;
    .find_title{
      font-size: 32rpx;
      color: #3D3D3D;
      line-height: 28rpx;
      display: flex;
      justify-content: space-between;
      padding-bottom: 30rpx;
      .find_refresh{
        font-size: 24rpx;
        color: #888888;
        line-height: 24rpx;
        display: flex;
        align-items: center;
      }
    }
    .find_list{
      .find_item{
        font-size: 24rpx;
        color: #333333;
        line-height: 24rpx;
        display: inline-block;
        padding: 16rpx 24rpx;
        background: #F4F4F4;
        border-radius: 30rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}

/* 搜索内容列表css */
.search_list_box{
  position: relative;
}
/* 热门推荐css */
.home_shop_box{
  // margin-top: -30rpx;
  position: relative;

  .home_shop_bg{
    min-height: 150rpx;
    background: linear-gradient( 180deg, #FFF2EA 0%, #FFFFFF 100%);
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .shop_box_content{
    position: relative;
    z-index: 2;
    padding: 30rpx 30rpx 0;
  }
  .shops_list_box{
    padding: 0 20rpx 20rpx;
    background: #f6f6f6;
  }
  .shop_box_title{
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #3D3D3D;
    margin-bottom: 30rpx;
  }
  .shop_box_list{
    margin-bottom: 20rpx;
    .shop_box_item{
      display: flex;
      padding-bottom: 20rpx;
      .shop_box_item_img{
        width: 80rpx;
        height: 80rpx;
        border-radius: 8rpx;
        overflow: hidden;
        position: relative;
        .shop_box_item_img_level{
          width: 24rpx;
          height: 24rpx;
          line-height: 26rpx;
          text-align: center;
          font-size: 20rpx;
          color: #FFFFFF;
          position: absolute;
          top: 0;
          left: 0;

          border-radius: 8rpx 0rpx 8rpx 0rpx;
        }
      }
      .shop_box_list_content{
        flex: 1;
        padding-left: 10rpx;
        display: flex;
        justify-content: space-between;
        .shop_box_content_wrap{
          flex: 1;
          padding-right: 10rpx;
          .shop_box_content_title{
            font-size: 26rpx;
            color: #0A0A0A;
            line-height: 28rpx;
            margin-bottom: 10rpx;
            .hot{
              height: 28rpx;
              line-height: 28rpx;
              text-align: center;
              font-size: 22rpx;
              color: #FFFFFF;
              background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
              border-radius: 4rpx;
              padding: 0 6rpx;
            }
          }
          .shop_box_content_activity{
            font-size: 24rpx;
            color: #888888;
            line-height: 24rpx;
            display: flex;
            align-items: center;
            .shop_box_content_activity_cash{
              font-size: 24rpx;
              color: #FFFFFF;
              line-height: 34rpx;
              background: #FD7C22;
              border-radius: 6rpx 0 0 6rpx;
              padding: 4rpx 12rpx;
            }
            .shop_box_content_activity_quality{
              font-size: 22rpx;
              color: #FD7C22;
              line-height: 30rpx;
              background: #FFFFFF;
              border: 2rpx solid #FD7C22;
              border-radius: 0 6rpx 6rpx 0;
              padding: 4rpx 12rpx;
              box-sizing: border-box;
            }
          }
        }
        .shop_box_content_right{
          width: 120rpx;
          font-size: 24rpx;
          color: #888888;
          line-height: 24rpx;
          text-align: right;
        }
      }
    }
  }
}
.barContent {
  position: fixed;
  z-index: 99;
  width: 100%;
}

.refresh {
  height: 100%;
}

.zpaging {
  height: 100%;
}

.null_text {
  font-size: 26rpx;
  color: #b4b4b4;
  text-align: center;
  box-sizing: border-box;
  padding: 40rpx 0;
}

.Top_wrap {
  position: relative;
  height: 250px;
  width: 100%;

  .My_top {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;

    .banner_img {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .My_top1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    .banner_img {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.nav_meu_wrap {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0 20rpx 20rpx 20rpx;
  width: 93%;
  margin: 20rpx auto;

  .nav_title {
    display: flex;
    align-items: center;
    padding-left: 26rpx;
    justify-content: space-between;
    margin: 0 auto;

    .nav_title_item {
      flex: 1;
      text-align: center;
      position: relative;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .m_title_name {
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 28rpx;
      }

      image {
        width: 50rpx;
        height: 20rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
  }

  .sssswiper {
    height: 288rpx;

    image {
      width: 66rpx;
      height: 66rpx;
    }

    .grid-text {
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}

/* 首页筛选 */
.cateCheck {
  width: 100% !important;
  font-size: 26rpx;
  color: #999999;
  display: flex;
  justify-content: space-around;
  padding: 0 20rpx 10rpx;
  /*border-radius: 20rpx;transition: all .3s linear;
  &.position {
    position: fixed;top: 116rpx;left: 0;background-color: #fff;width: 100%;box-sizing: border-box;padding: 30rpx;border-radius: 0;margin: 0;z-index: 111;box-shadow: 0 0 20rpx 3rpx rgba(0,0,0,.2);
  }*/
}

.cateCheck > view image {
  width: 12rpx;
  height: 8rpx;
  position: relative;
  left: 8rpx;
  top: -4rpx;
}

.cateCheck .buttonBg {
  width: 64rpx;
  height: 40rpx;
  border-radius: 40rpx;
  background: linear-gradient(140deg, #FECC32 0%, #FECC32 100%);
  position: relative;
  display: inline-block;
  top: 10rpx;
  margin-right: 10rpx;
}

.cateCheck .buttonOn {
  position: absolute;
  width: 36rpx;
  height: 36rpx;
  background-color: white;
  border-radius: 40rpx;
  top: 2rpx;
  right: 2rpx;
}

.cateCheck .btnmoren {
  color: #222;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 14rpx 20rpx;
  text-align: center;
  font-size: 24rpx;
}

.cateCheck .checkShopType {
  color: #333;
  background: linear-gradient(140deg, #FECC32 0%, #FFDF50 100%);
  border-radius: 10rpx;
  padding: 14rpx 20rpx;
  text-align: center;
  font-size: 24rpx;
}

.cateCheck .buttonUn {
  background: #999;
}

.cateCheck .buttonUn .buttonOn {
  left: 2rpx;
}

.TongZhi_wrap {
  background-color: #ffffff;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  width: 93%;
  margin: 0 auto 20rpx;

  .TongZhi_item {
    display: flex;
    align-items: center;

    image {
      width: 128rpx;
    }

    .tz_wenan {
      padding: 0 20rpx 0 20rpx;
      word-break: break-all;
      display: -webkit-box;
      font-size: 22rpx;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .ta_right_icon {
      margin-left: auto;
      border-radius: 200rpx;
      background-color: #EFEFEF;
      width: 50rpx;
      height: 50rpx;
      text-align: center;
      line-height: 50rpx;
      display: flex;
      align-items: center;
      padding-left: 10rpx;
    }
  }
}

.checkBox {
  width: 100%;
  background-color: #ffffff;
  border-radius: 0 0 40rpx 40rpx;
}

.checkBox .btnmoren {
  color: #222;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 14rpx 20rpx;
  text-align: center;
  font-size: 24rpx;
}

.searchBox {
  //width: 500rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  color: #999999;
  border-radius: 200rpx;
  background-color: #f1f1f2;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-top: var(--status-bar-height);
}

.searchBox image {
  width: 26rpx;
  height: 25rpx;
  margin-left: 30rpx;
  margin-right: 15rpx;
}

.nearShop {
  font-size: 40rpx;
  color: #222222;
  font-weight: bold;
  position: relative;
  margin-left: 30rpx;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}

.nearShop::before {
  content: '';
  display: inline-block;
  width: 40rpx;
  height: 6rpx;
  position: absolute;
  left: 58rpx;
  top: 56rpx;
  background-color: #FECC32;
}

.sortList {
  width: 100%;
  height: auto;
}

.sortList view {
  height: 89rpx;
  border-bottom: 1rpx solid #f7f7f7;
  box-sizing: border-box;
  padding: 0 30rpx;
  line-height: 89rpx;
  font-size: 28rpx;
}

.sortList view:last-child {
  border: 0;
}

.sortList image {
  width: 28rpx;
  height: 25rpx;
  float: right;
  margin-top: 34rpx;
}

.cateCheck .buttonUn {
  background: #999;
}

.cateCheck .buttonUn .buttonOn {
  left: 2rpx;
}

.sortCheck text {
  color: #FECC32;
}

.notice_box {
  position: relative;
}

.notice_box .bg_img {
  width: 100%;
  height: 800rpx;
  vertical-align: bottom;
  border-radius: 20rpx;
}

.notice_box .close_img {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 30rpx;
  top: 40rpx;
  z-index: 9;
}

.notice_box .notice_content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 130rpx;
  box-sizing: border-box;
  padding: 40rpx;
}

.notice {
  margin-top: -380rpx;
  width: 580rpx;
  height: 380rpx;
}

.nav_box {
  display: flex;
  align-items: center;
  height: 100rpx;
  flex: 1;
  position: relative;
  z-index: 10;
  .search_box_content{
    width: 100%;
    height: 68rpx;
    margin: 20rpx 0;
    padding: 0 20rpx;
  }
  .left_box {
    z-index: 88;

    image {
      width: 68rpx;
      margin-bottom: 10rpx;
    }
  }

  .sousuo_box {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    .search_input_content{
      height: 68rpx;
      background: #FFFFFF;
      border-radius: 200rpx;
      flex: 1;
      display: flex;
      align-items: center;
      .input_box {
        width: calc(100% - 130rpx);
        background: transparent;
      }
      .sousuo_btn {
        background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
        border-radius: 200rpx;
        color: #FFFFFF;
        position: absolute;
        right: 6rpx;
        z-index: 10;
        width: 120rpx;
        height: 53rpx;
        line-height: 53rpx;
        font-size: 26rpx;
        text-align: center;
      }
    }



    .change_address{
      width: 70rpx;
      height: 60rpx;
      padding: 0 10rpx;
      font-size: 24rpx;
      color: #3D3D3D;
      text-align: center;
    }
  }

  .right_box {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 10rpx;

    image {
      width: 64rpx;
    }

    .tixing {
      width: 18rpx;
      height: 18rpx;
      border-radius: 200rpx;
      background-color: #F00;
      position: absolute;
      right: 10rpx;
      top: 10rpx;
    }
  }
}
.active_bg{
  width: 100%;
  height: 80rpx;
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #FFFFFF;
}
.nav_active{
  background: #FFFFFF;
  box-shadow: 0 0 20rpx 3rpx rgba(0,0,0,.2);
}
/*抢红包弹窗样式*/
.HongBaoshow {
  width: 580rpx;

  .tc_bg_box {
    position: relative;

    .hb_bg {
      border-radius: 10px;
      width: 100%;
      height: 300rpx;
    }

    .wenan {
      position: absolute;
      z-index: 999;
      top: 0;
      padding: 46rpx;
      color: #fff;

      view:nth-child(1) {
        font-weight: bold;
        font-size: 44rpx;
      }

      view:nth-child(2) {
        margin-top: 10rpx;
      }
    }
  }

  .pingtai_box {
    padding: 10rpx 30rpx 0 30rpx;

    .pt_itme1 {
      display: flex;
      align-items: center;
      background-color: #FEF9E9;
      padding: 20rpx 30rpx;
      border-radius: 20rpx;
      width: 100%;
      margin: 30rpx 0 38rpx 0;

      .pt_icon {
        width: 100rpx;
        height: 100rpx;
      }

      .pt_info {
        padding-left: 25rpx;
        flex: 1;

        view:nth-child(1) {
          font-size: 34rpx;
          font-weight: bold;
        }

        view:nth-child(2) {
          color: #999999;
          font-size: 24rpx;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .qiang_btn {
        width: 100rpx;
        height: 100rpx;
        margin-left: auto;
      }
    }
  }
}

.dangqian_dizhi {
  margin: 18rpx 0 10rpx 28rpx;
  padding: 0 0;
  display: flex;
  height: 36rpx;
  align-items: center;

  view:nth-child(1) {
    position: relative;
  }

  .adr_icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
    margin-bottom: 12rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .cityName {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 28rpx;
    z-index: 88;
  }
}

.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FDE52F, #FDE52F);
}

/* 列表 */
.list {
  width: 100%;
  height: 360rpx;
  box-sizing: border-box;
  background: white;
  padding: 20rpx;
}

.list_whole {
  width: 20%;
  height: 150rpx;
  float: left;
  padding: 20rpx;
  text-align: center;
}

.list_whole:nth-child(5n + 5) {
  margin-right: 0;
}

.list_whole image {
  width: 96rpx;
  height: 96rpx;
}

.list_whole text {
  font-size: 24rpx;
  color: #393939;
  line-height: 40rpx;
  display: block;
}
.shops_list {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
</style>
